import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { NavBar, Form, Input, Button, Toast } from 'antd-mobile';
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons';
import { connect } from 'dva';
import styles from './index.less';

const Login = (props) => {

  const { token, userInfo, picUrl, picKey, dispatch } = props
  console.log(picUrl);

  const navigate = useNavigate();
  const [visible, setVisible] = useState(false);
  const [countdown, setCountdown] = useState(60); // 初始倒计时时间为60秒
  const [isCounting, setIsCounting] = useState(false); // 是否正在倒计时

  useEffect(() => {
    let timer;

    if (isCounting && countdown > 0) {
      timer = setInterval(() => {
        setCountdown((prevCountdown) => prevCountdown - 1);
      }, 1000);
    }

    if (countdown === 0) {
      setIsCounting(false);
    }

    return () => {
      clearInterval(timer);
    };
  }, [isCounting, countdown]);

  const startCountdown = (event) => {
    if (!isCounting) {
      setCountdown(60); // 重置倒计时时间
      setIsCounting(true);
    }

    Toast.show({
      content: '发送成功，请注意查收',
      position: 'top',
    })
  };

  const onFinish = (value) => {
    dispatch({
      type: 'user/loginCheck',
      payload: {
        username: value.username,
        password: value.password,
      }
    }).then(() => {
      Toast.show({
        content: '登录成功',
        position: 'top',
      })
      // navigate('/home');
      navigate('/');
    })
  };

  const handlePicCode = () => {
    dispatch({
      type: 'user/getPicCode',
    });
  }

  // const handleClick = () => {
  //   if (!timer && second === totalSecond) {
  //     // 开启倒计时
  //     setTimer(
  //       setInterval(() => {
  //         setSecond(second - 1)

  //         if (second < 1) {
  //           clearInterval(timer);
  //           setTimer(null);
  //           setSecond(totalSecond);
  //         }
  //       }, 1000)
  //     )

  //     // 发送请求，获取验证码
  //     Toast.show({
  //       content:'发送成功，请注意查收',
  //       position: 'top',
  //     })
  //   }
  // }

  return (
    <>
      <div className='navlogin'>
        <NavBar onBack={() => {
          // navigate('/home');
          navigate('/');
        }}>
          会员登陆
        </NavBar>
      </div>

      <div className='logintitle'>
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>

      <Form
        layout='horizontal'
        footer={                     // 表单尾部的内容，常常用来放置提交按钮
          <Button block type='submit' className='my-button' size='middle'>
            登录
          </Button>
        }
        onFinish={onFinish}
      >
        <Form.Item
          label='用户名'
          name='username'
          rules={[
            { required: true, message: '用户名不能为空!' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
          ]}>
          <Input
            placeholder='请输入用户名'
            autoComplete='off'
            clearable
          />
        </Form.Item>
        <Form.Item
          label='密码'
          name='password'
          rules={[{ required: true, message: '密码不能为空!' }]}
          extra={
            <div className={styles.eye}>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
          <Input
            placeholder='请输入密码'
            clearable
            type={visible ? 'text' : 'password'}
          />
        </Form.Item>
        <Form.Item
          label='图形验证码'
          name='piccode'
          extra={
            <div className='form-item img' onClick={handlePicCode}>
              <img src={picUrl ? picUrl : require('@/assets/code.png')} alt="" />
            </div>
          }
        >
          <Input maxlength="4" placeholder="图形验证码" type="text" />
        </Form.Item>
        <Form.Item
          label='短信验证码'
          name='messagecode'
          extra={
            <div className={styles.extraPart}>
              <Button href='###' onClick={startCountdown} disabled={isCounting} size='small'>
                {isCounting ? countdown + `秒后重新发送` : '获取验证码'}
              </Button>
            </div>
          }
        >
          <Input placeholder='短信验证码' clearable />
        </Form.Item>
      </Form>
    </>
  )
};

const mapStateToProps = ({ user }) => {
  // console.log(state);
  return {
    token: user.token,
    picUrl: user.picUrl,
  }
};

export default connect(mapStateToProps)(Login);
// export default Login;